<template>
	<u-overlay :show="_show">
		<view class="wrapper fboxCol Xcenter Ycenter">
			<view class="confim-box fboxCol Xcenter Ycenter">
				<view class="close fboxRow Xend">
					<text class="bksCIcon bks-c-ziyuan150guanbi font24" data-tag="close" @tap="cancel"></text>
				</view>
				<view class="font28 color-9899A1" v-if="config.title || title">{{config.title || title || '提示'}}</view>
				<view class="content fboxWrap Ycenter Xcenter font32 color-36363A">{{config.content || content}}</view>
				<view class="btn-group fboxRow Ycenter Xcenter font30">
					<view class="flex1 btn fboxRow Ycenter Xcenter color-9899A1" data-tag="cancel" @tap="cancel">
						{{btnCancelTxt}}
					</view>
					<view class="flex1 btn fboxRow Ycenter Xcenter color-00C15D" @tap="confirm">{{btnConfirmText}}
					</view>
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			config: {
				type: Object,
				default: () => {
					return {
						// title: ''
						content: '',
					}
				}
			},
			title: {
				type: String,
				value: ''
			},
			content: {
				type: String,
				value: ''
			},
			btnCancelTxt: {
				type: String,
				value: '取消'
			},
			btnConfirmText: {
				type: String,
				value: '确定'
			}
		},
		computed: {
			_show: {
				get() {
					return this.show
				},
				set(val) {
					this.$emit('update:show', val)
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			cancel(e) {
				this._show = false
				if (e) {
					const {
						tag
					} = e.currentTarget.dataset
					this.$emit('cancel', { tag })
				}
			},
			confirm() {
				this.cancel()
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		height: 100%;
		text-align: center;
	}

	.confim-box {
		position: relative;
		width: 590rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.content {
		padding: 0 30rpx 30rpx;
		min-height: 150rpx;
		line-height: 60rpx;
	}

	.btn-group {
		width: 590rpx;
		height: 110rpx;
		border-top: 1px solid #EBEBF0;
	}

	.btn-group .btn+.btn {
		border-left: 1px solid #EBEBF0;
	}

	.close {
		width: 100%;
		padding: 20rpx 30rpx;
	}
</style>